<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div style="width: 100%;height: 100%;" ref="div"></div>
</template>

<script setup lang="ts">
// 引入echarts
import * as echarts from 'echarts';
import { ref, onMounted, nextTick,watch } from 'vue'
import UseMockStore from '@/stores/mock';
const MockStore = UseMockStore()

// const props = defineProps(['MockData'])
// 获取div的DOM元素
let div = ref()
onMounted(() => {
 
})

watch(()=>MockStore.MackObj,()=>{
  nextTick(() => {
  // console.log(MockStore.MackObj.orderTrend);
    // 获取echarts的初始化实例
    let Mychart = echarts.init(div.value)
    // 绘制图表
    Mychart.setOption({
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        }
      },
      //  网格布局
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        show: true,
        backgroundColor: 'skyblue'
      },
      //  x轴
      xAxis: [
        {
          show: false,
          type: 'category',
          //两侧不留白
          boundaryGap: false,
        }
      ],
      //  y轴
      yAxis: [
        {
          show: false,
          type: 'value'
        }
      ],
      series: [
        {

          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(180, 62, 110)'
              },
              {
                offset: 1,
                color: 'rgb(61, 62, 229)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: (MockStore.MackObj).orderTrend 
        }
      ]
    })
  })
})







</script>
<script lang="ts">
export default {
  name: 'Line'
}
</script>
<style lang="scss" scoped></style>